<%-- 
    Document   : news
    Created on : 2014/4/25, 下午 02:29:39
    Author     : Gjun
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
﻿<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<html>
    <head>
        <title>Flexible Slide-to-top Accordion</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Flexible Slide-to-top Accordion" />
        <meta name="keywords" content="accordion, jquery, flexible, responsive, slide to top, tabs, UI, web design" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/background_a.css" />
        <link rel="stylesheet" type="text/css" href="css/Accordion_style.css" />
        <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css' />
		
		<noscript>
			<style>
				.st-accordion ul li{
					height:auto;
				}
				.st-accordion ul li > a span{
					visibility:hidden;
				}
			</style>
		</noscript>
    </head>
    <body>
	
        <div class="container">
            <div class="header">
                <a href="http://tympanus.net/Tutorials/CircleNavigationEffect/">
					<strong>&laquo; Previous Demo: </strong>Circle Navigation Effect with CSS3
				</a>
				<span class="right">
					<a href="http://www.flickr.com/photos/rayand/" target="_blank">Images by Rayand</a>
					<a href="http://creativecommons.org/licenses/by/2.0/deed.en" target="_blank">CC BY 2.0</a>
					<a href="http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/">
						<strong>Back to the Codrops Article</strong>
					</a>
				</span>
				<div class="clr"></div>
            </div>
            <h1>親愛的人客來來來<span>歡迎來信詢問歐</span></h1>
			<div class="more">
				<a href="news.html" class="current">最新消息</a>
				<a href="faq.html">常見問題</a>
				<p><strong>更多問題歡迎來信:</strong>IWontHandleYourProblem@mail.com</p>
			</div>
            <div class="wrapper">
                <div id="st-accordion" class="st-accordion">
                    <ul>
                        <li>
                            <a href="#">最新商品火熱上架!<span class="st-arrow">Open or Close</span></a>
                            <div class="st-content">
                                <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                                <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
                                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                                <img src="images/1.jpg" alt="image01"/>
                                <img src="images/2.jpg" alt="image02"/>
                                <img src="images/3.jpg" alt="image03"/>
                                <img src="images/4.jpg" alt="image04"/>
                                <img src="images/5.jpg" alt="image05"/>
                                <img src="images/6.jpg" alt="image06"/>
                            </div>
                        </li>
                        <li>
                            <a href="#">新春特賣組合COMBO再COMBO!<span class="st-arrow">Open or Close</span></a>
                            <div class="st-content">
                                <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                                <img src="images/7.jpg" alt="image07"/>
                                <img src="images/8.jpg" alt="image08"/>
                                <img src="images/9.jpg" alt="image09"/>
                                <img src="images/10.jpg" alt="image10"/>
                                <img src="images/11.jpg" alt="image11"/>
                                <img src="images/12.jpg" alt="image12"/>
                            </div>
                        </li>
                        <li>
                            <a href="#">最新紅利兌換禮品快來換大獎!<span class="st-arrow">Open or Close</span></a>
                           　<div class="st-content">
                                <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                                <img src="images/7.jpg" alt="image07"/>
                                <img src="images/8.jpg" alt="image08"/>
                                <img src="images/9.jpg" alt="image09"/>
                                <img src="images/10.jpg" alt="image10"/>
                                <img src="images/11.jpg" alt="image11"/>
                                <img src="images/12.jpg" alt="image12"/>
                            </div>
                        </li>
                        <li>
                            <a href="#">倒店在即，大家快救！！<span class="st-arrow">Open or Close</span></a>
                            <div class="st-content">
                                <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                                <img src="images/7.jpg" alt="image07"/>
                                <img src="images/8.jpg" alt="image08"/>
                                <img src="images/9.jpg" alt="image09"/>
                                <img src="images/10.jpg" alt="image10"/>
                                <img src="images/11.jpg" alt="image11"/>
                                <img src="images/12.jpg" alt="image12"/>
                            </div>
                        </li>                        
                    </ul>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.accordion.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
			
				$('#st-accordion').accordion({
				oneOpenedItem	: true
				});
				
				
            });
        </script>
          <div id="footer" >  
     <table style="width:100%;" >
				<tr>
					<td>&nbsp</td>
					<td align="center" style="align:center"><a href="" id="">關於我們</a> </td>    
					<td><a href="/playdoll/login/addmember">加入會員</a> </td>       
					<td><a href="" id="">FAQ </a>     </td>   
					<td><a href="" id="">線上客服</a> </td>			
					<td>&nbsp</td>
				</tr>
				
				<tr>
					<td>&nbsp</td>
					<td colspan=4><b>玩公仔拍賣國際資訊股份有限公司版權所有，轉載必究‧Copyright©Co. Ltd.</b></td>
					<td>&nbsp</td>
				</tr>
			</table>
   <!-- end .footer --></div>
    </body>
</html>	